<template>
  <div class="link-manager">
    <el-dialog title="链接选择器" :visible.sync="isShowDialog" width="1000px">
      <div class="content">
        <div class="left">
          <el-menu default-active="1" unique-opened>
            <el-submenu :index="item.type" v-for="(item, index) in linkList" :key="index">
              <template slot="title">
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item :index="sitem.id" v-for="(sitem, sindex) in item.children" :key="sindex" @click="showNavList(sitem)">{{ sitem.title }}</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="right">
          <!-- <div class="top">
            搜索框
          </div> -->
          <div class="bottom" v-if="currentGroup.children.length != 0">
            <el-table :data="currentGroup.children" highlight-current-row height="480" @current-change="linkChange">
              <!-- <el-table-column label=" " width="80" align="center">
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.checked" :label="true" @click.native="checkLink(scope.row)"></el-radio>
                </template>
              </el-table-column> -->
              <el-table-column prop="title" label="标题" width="200" align="center"></el-table-column>
              <el-table-column prop="path" label="路径"></el-table-column>
            </el-table>
          </div>
          <div v-else>
            <no-data msg="当前分类暂无链接" type="2"></no-data>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="page">
          <pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="currentGroup.children.length" :page-sizes="[10]"></pagination>
        </div>
        <div class="btns">
          <el-button @click="isShowDialog = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'linkManager',
  props: {
    path: String,
  },
  data() {
    return {
      queryInfo: {
        page: 1,
        page_size: 10,
        type: 1,
      },
      total: 0,
      isShowDialog: true,
      linkList: [],
      currentGroup: {
        children: [],
      },
      currentPath: '',
      index: '',
    }
  },
  created() {
    this.getLinkList()
  },
  methods: {
    showDialog(index) {
      this.isShowDialog = true
      this.index = index
      // this.linkList()
    },
    showNavList(sitem) {
      console.log(sitem)
      this.currentGroup = sitem
    },
    async getLinkList() {
      this.$axios.get('/static/wxapp_pages_link.json', {}).then(res => {
        res.data.data.forEach(x => {
          x.children.forEach(y => {
            y.children.forEach(z => {
              z.checked = false
            })
          })
        })
        // console.log(res.data.data)

        this.linkList = res.data.data
        this.currentGroup = this.linkList[0].children[0]
        // this.pageList = res.data.data
      })
      // console.log(res)
    },
    checkLink(row) {
      console.log(row)
      this.currentGroup.children.forEach(x => {
        x.checked = false
      })
      row.checked = true
    },
    linkChange(val) {
      console.log(val)
      if (val != null) {
        this.currentPath = val.path
      }
    },
    submit() {
      if (this.currentPath == '') return this.$message.warning('请先选择链接')
      this.$emit('change', this.currentPath, this.index)
      this.isShowDialog = false
    },
    handleSizeChange(newSize) {
      this.queryInfo.page_size = newSize
      // this.linkList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      // this.linkList()
    },
  },
  computed: {
    ...mapGetters({
      imgUrl: 'settings/imgUrl',
    }),
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 6px;
}
::v-deep .el-dialog__body {
  padding: 4px 0;
}

.link-manager {
  ::v-deep .el-pagination .el-select .el-input {
    width: 100px !important;
    .el-input__inner {
      height: 28px !important;
      width: 100% !important;
    }
  }
  ::v-deep .el-pagination__editor.el-input {
    width: 50px !important;
    .el-input__inner {
      height: 28px !important;
      width: 100% !important;
    }
  }
  ::v-deep {
    .el-table__row {
      height: 60px;
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    height: 520px;
    .left {
      padding: 20px;
      width: 160px;
      max-width: 180px;
      border-right: 1px solid #f1f1f1;
      box-sizing: border-box;
      .el-menu {
        border: none;
        ::v-deep {
          .el-submenu__title {
            height: 40px;
            line-height: 40px;
            padding: 0 20px 0 10px !important;
          }
          .el-submenu__title i {
            color: #333;
          }

          .is-opened {
            .el-submenu__title {
              color: #409eff;
            }
            .el-submenu__title i {
              color: #409eff;
            }
          }
          .el-submenu .el-menu-item {
            padding: 0 20px 0 40px !important;
            height: 48px;
            line-height: 48px;
            width: 100%;
            min-width: 0;
          }
        }
      }
    }
    .right {
      // flex: 1;
      width: 840px;
      .top {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 60px;
        padding-right: 50px;
        // margin-left: 20px;
        span {
          margin-right: 20px;
          color: #999;
          font-size: 13px;
        }
      }
      .bottom {
        margin: 30px;
        margin-top: 30px;
        .el-table::before {
          height: 0;
        }
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
::v-deep .el-pagination.is-background {
  margin: 0;
}
::v-deep .el-upload-list {
  display: none;
}
</style>
